---
title: Benchmarks
---

import { Card } from '@astrojs/starlight/components'
import Seo from '../../../components/Seo.astro'
import Benchmark1 from '../../../assets/benchmark-1.png'
import Benchmark2 from '../../../assets/benchmark-2.png'
import Benchmark3 from '../../../assets/benchmark-3.png'
import Benchmark4 from '../../../assets/benchmark-4.png'
import Benchmark5 from '../../../assets/benchmark-5.png'

<Seo
    seo={{
        title: 'Benchmarks',
        description: 'How fast is Unistyles?'
    }}
>

 In this guide, I will try to explain what you can expect from Unistyles and the potential render penalty when using it in your project.

 As developers, we appreciate powerful libraries that address all our needs in terms of syntax, scalability, and cross-platform support. 
 Unistyles was designed to be the fastest styling solution on the market. Before we delve further, it's important to note that this library is not a UI Kit. 
 It provides low-level functionality for developers who either want full control of styling in their commercial projects or for library authors to build UI Kits on top of it.


It's also worth mentioning that there won't be a faster way than passing your objects to `StyleSheet.create`.
Unfortunately, the functionalities of StyleSheet are limited. Building a fully-featured, cross-platform app without some additional help is challenging.

:::caution
Benchmarks are publicly available in the Unistyles 2.0 repository and were measured in release mode.
:::

### Startup time

<img src={Benchmark1.src} alt="Startup time" />


:::tip[Initialization time]
The startup time of Unistyles 2.x is about 0.2 ms slower than Unistyles 1.x due to an additional roundtrip to C++.
:::

### Most popular benchmark in the RN community

Many libraries utilize a test to render 1000 views styled with each respective library. 
You can find them [here](https://github.com/efstathiosntonas/react-native-style-libraries-benchmark) 
and [here](https://gluestack.io/ui/docs/performance/benchmarks).

Unistyles will consistently be the fastest solution compared to these alternatives because it avoids 
abstraction in components and parses the StyleSheet just once for the 1000 views.

<img src={Benchmark2.src} alt="Rendering 1000 views" />

### Rendering 100 useStyles hooks

Let's modify the benchmark to create a more challenging scenario for Unistyles. We'll render 100 StyleSheets vs 100 `useStyles` hooks. 
This scenario is designed to represent the worst-case scenario for a production app, which simultaneously mounts 100 individual components, each with separate StyleSheets.

<img src={Benchmark3.src} alt="Rendering 100 useStyles" />

The performance overhead of Unistyles 2.x, when compared to StyleSheet, is approximately **0.03 milliseconds per view**. 
This number was determined by subtracting the average time of StyleSheet from that of Unistyles 2.x and then dividing the result by the number of views.

### Rendering large lists with 1000 items

Let's delve deeper and consider a scenario where your app needs to render up to 1000 separate views using the useStyles hook. 
This might simulate a complex app featuring a non-virtualized list.

<img src={Benchmark4.src} alt="Rendering 1000 useStyles" />

This benchmark illustrates the scenario for using traditional StyleSheets vs Unistyles 2.x in rendering large lists in React Native applications. We can also observe that as the number of views increases, the performance overhead decreases in favor of Unistyles 2.x. 
This time, the cost per view is approximately **0.01 milliseconds per view**.

### Rendering large list with all features

In the final benchmark, we compare the performance of a plain StyleSheet against Unistyles 2.x, which incorporates a comprehensive range of features. Unistyles 2.x is tested with three registered themes, 
breakpoints, and the full utilization of all its features: media queries (mq), breakpoints, variants, and theme integration.

<img src={Benchmark5.src} alt="Rendering 1000 useStyles" />

:::tip[Rendering time]
Did you know that a blink of the eye takes around 120ms? 
Unistyles can render your 1000 views in an even shorter period of time! 👀
:::

</Seo>
